<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html{
				width: 100%;
				height: 100%;
				background: #000;
			}
			.box1{
				width: 100%;
				height: 800px;
				position: absolute;
			}
			.box2{
				width: 50px;
				height: 50px;
				background: palegoldenrod;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				animation: snow linear infinite;
				 animation-duration: 3s; 
			}
			@keyframes snow {
				0% {
					transform: translate3d(0, 0, 0) rotate(0deg);
					opacity: 1;
				}
			
				100% {
					transform: translate3d(150px,500px, 0) rotate(50deg);
					opacity: 0.3;

				}
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>
